<template>
  <div style="width: 100%;min-height: 100vh;background-color: #F5F7F9">
    <Header ref="headerRef" @tabIndexChange="" :selectedIndex="2"></Header>
    <div class="container flex-between" style="padding-top: 20px">
      <UserLeftBar @afterSelectMenuHandle="afterSelectMenuHandle"></UserLeftBar>
      <OrderList v-if="data.typeCode == 'order'" @goOrderInfo="goOrderInfo"></OrderList>
      <OrderInfo v-if="data.typeCode == 'orderInfo'" :orderInfo="data.orderItem"></OrderInfo>
      <PersonInfo v-if="data.typeCode == 'info'" @afterSaveHandle="afterSaveHandle"></PersonInfo>
      <ResetPassword v-if="data.typeCode == 'account'"></ResetPassword>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import Header from "../component/header.vue";
import UserLeftBar from './component/user-left-bar.vue'
import OrderList from './order/list.vue'
import OrderInfo from './order/info.vue'
import PersonInfo from './person/info.vue'
import ResetPassword from './account/reset-password.vue'

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const data = reactive({
  typeCode: '',
  intentionalExamId: '',
  intentionalExam: '',
  orderItem: {}
});
const initData = () => {
  data.intentionalExamId = localStorage.getItem('intentionalExamId')
  data.intentionalExam = localStorage.getItem('intentionalExam')
  getOrderList()
}
function afterSelectMenuHandle(code) {
  data.typeCode = code
  if(code == 'order') {
    getOrderList()
  }
}
function afterSaveHandle() {
  proxy.$refs.headerRef.initUserData()
}
function getOrderList() {
  // data.orderList = []
  // listOrder({payStatusFlag: statusMap[data.activeTabName]}, (res)=> {
  //   data.orderList = res.data
  // })
}

function goOrderInfo(item) {
  data.typeCode = 'orderInfo'
  data.orderItem = item
}

onMounted(() => {
  data.typeCode = route.query.typeCode || 'order'
  initData()
})
// watch(route, (val) => {
//   console.log(val.query.typeCode)
//   data.typeCode = val.query.typeCode || 'order'
// })
</script>

<style scoped>
</style>
